<template>
	<view class="bg-light" style="height: 100%;">
		<tabsTop tabName="新增收获地址"></tabsTop>
		<!-- 地址信息 -->
		<view class="mx-2 my-2 bg-white rounded-lg">
			<view class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
				<text class="font flex-shrink" style="width: 20%;">收货人</text>
				<input v-model="form.Name" class="ml-2 font w-100" placeholder-class="font text-muted" placeholder="收货人姓名" type="text" />
			</view>
			<view class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
				<text class="font flex-shrink" style="width: 20%;">手机号码</text>
				<input v-model="form.Phone" class="ml-2 font w-100" placeholder-class="font text-muted" placeholder="收货人手机号" type="text" />
			</view>
			<view class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
				<text class="font flex-shrink" style="width: 20%;">所在地区</text>
				<picker mode="region" class="ml-2 text-muted font" style="width: 100%;" @change="bindAdressChange">
					<view class="text-hover-dark" v-if="Address.length > 0">
						{{Address[0]}}/{{Address[1]}}/{{Address[2]}}
					</view>
					<view v-else>请选择省/市/区</view>
				</picker>
				<uni-icons type="right" class="flex-shrink" color="#828d96" size="16"></uni-icons>
			</view>
			<view class="mx-2 py-2 flex align-center">
				<text class="font flex-shrink" style="width: 20%;">详细地址</text>
				<input v-model="form.Address_Details" class="ml-2 font w-100" placeholder-class="font text-muted" placeholder="请填写详细地址" type="text" />
				<view @click="getMapLocation()" class="flex flex-shrink align-center">
					<uni-icons type="location-filled" class="flex-shrink" color="#828d96" size="16"></uni-icons>
					<text class="font-sm text-muted">定位</text>
				</view>
			</view>
		</view>
		<!-- 设置默认联系人 -->
		<view class="mx-2 mb-2 bg-white rounded-lg">
			<view class="mx-2 py-1 flex justify-between align-center">
				<text class="font">设置默认联系人</text>
				<switch class="flex-shrink" style="transform:scale(0.8)" :checked="isdefault" @change="handleswitch()" />
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="flex align-center justify-between" style="height: 110rpx;">
			<view @click="handlesubmit()" class="mx-3 w-100 bg-success px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">保存并使用</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import { getAddAction, AddressResolution, LocationResolution } from "@/api/global.js"
	import { validate,validatemobile,chooseLocation} from "@/static/js/GeneralUtil.js"
	export default {
		components: {
			tabsTop, //顶部标题组件
		},
		data() {
			return {
				Address:[],//存放选中地址，
				form:{
					Address_SerialNumber:'',
					Open_ID:app.globalData.Open_ID,
					Address:'',
					Address_Details:'',
					Name:'',
					Phone:'',
					latitude:'',
					longitude:'',
					App_ID:app.globalData.App_ID,
				},
				isdefault:false,//默认
				loading: false,//节流
			}
		},
		methods: {
			handleswitch(){//默认收获地址
				this.isdefault = !this.isdefault
			},
			bindAdressChange(e){//地区选择器	
				this.Address = e.detail.value;
				this.form.Address = this.Address[0]+"/"+this.Address[1]+"/"+this.Address[2];
			},
			getMapLocation(){//调用地图选择地址
				chooseLocation((res)=>{
					this.getLocationResolution(res,({Data})=>{
						let province = Data.address_component.province//省
						let city = Data.address_component.city//市
						let district = Data.address_component.district//区
						let street_number = Data.address_component.street_number//街道
						this.Address = [province,city,district];
						this.form.Address = province+'/'+city+'/'+district;
						this.form.Address_Details = street_number;
					})
				})
			},
			async getLocationResolution({latitude,longitude},callback){//逆地址解析
				callback(await LocationResolution({latitude,longitude,Open_ID:app.globalData.Open_ID}));
			},
			async handlesubmit(){//保存并提交使用
				//校验+节流
				if(validate(this.form.Name,'请输入收货人姓名')&&validatemobile(this.form.Phone)
					&&validate(this.form.Address,'请选择收获地址')&&validate(this.form.Address_Details,'请输入详细地址')&&!this.loading){
					uni.showLoading({
						title: "加载中...",
					});
					this.loading = true;//获取地址坐标
					const res1 = await AddressResolution({
						Address:this.form.Address+this.form.Address_Details,
						Open_ID:app.globalData.Open_ID
					})//地址解析，保存地址经纬度
					if(res1.Status == "success"){
						this.form.latitude = res1.Data.lat;
						this.form.longitude = res1.Data.lng;
					}else{
						uni.hideLoading();
						uni.showToast({ title: '提交失败！',icon:'error'})
						this.loading = false;
						return;
					}//添加地址
					const res2 = await getAddAction({
						Data:JSON.stringify({member_address_info:[this.form]}),
						Open_ID:app.globalData.Open_ID
					})
					uni.hideLoading();
					if(res2.Status == "success"){
						//判断是否为默认地址
						if(this.isdefault){
							this.form.Address_SerialNumber = res2.Data
							uni.setStorageSync("customerAddress",this.form)
						}
						uni.showToast({ title: '提交成功！',icon:'success'})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							uni.navigateBack()//后退
						}, 500)
					}else{
						uni.showToast({ title: '提交失败！',icon:'error'})
					}
					this.loading = false;
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f8f9fa;
	}
</style>
